<template>
    <div class="chart-box">
        <swiper v-if="showSwper" ref="swiper" :options="swiperOptions" class="swiper">
            <swiper-slide v-for="(cur, i) in 10" :key="i" class="swiper-item">
                <div class="img-card" v-for="item in 4" :key="item" @click="$emit('clickItem')">
                    <img src="@/assets/cx_img2.png" alt="">
                    <div>人民法院报：《以数字化改革赋能数字法院建设》</div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>

<script>

export default {
    name: "DigitalTrialCard",
    data() {
        return {
            showSwper: false,
            swiperOptions: {
                loop: true,
                direction: 'vertical',
                slidesPerView: 2,
                autoplay: {
                    delay: 2000,
                }
            },
        }
    },
    mounted() {
        // 结局路由缓存问题
        setTimeout(() => {
            this.showSwper = true
        }, 0);
    },
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 500px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;

    .img-card {
        width: 278px;
        font-size: 16px;
        text-align: center;
        color: #FFFFFF;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 10px;
        cursor: pointer;

        div {
            width: 100%;
            margin: 10px 0 0;
            text-align: center;
            line-height: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        img {
            height: 180px;
            width: 100%;
        }
    }
}

.swiper {
    height: 100%;
    width: 95%;
    .swiper-item{
        display: flex;
        width: 100%;
        align-items: center;
    }
}
</style>